<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>首页 - 驴妈妈流立方</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!-- ace settings handler -->
		<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />

	</head>

	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
		<div class="tab-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
							<h5 class="widget-title lighter">筛选条件</h5>
						</div>
						<div class="widget-body" style="background-color: #EFF3F8;">
							<div class="widget-main">
								<form class="form-inline" id="searchForm" method="post" action="${rc.contextPath}/webStatistics/firstScreenTime">
									<input id="signParams" type="hidden" name="signParams" value="${pageMonitorVO.signParams}">
									<input id="timeInterval" type="hidden" name="timeInterval" value="${pageMonitorVO.timeInterval}">
									<input id="chooseTimeVO" type="hidden" name="chooseTimeVO" value="${pageMonitorVO.chooseTimeVO}">
									<div class="form-group">
										<label for="exampleInputName2">选择时段</label> 
										<input type="text" id="config-demo" name="config-demo" class="form-control time" disabled='true' readOnly='true' value="${pageMonitorVO.chooseTimeVO}">
											<button id="app_search" type="button"  onclick="replaceDate('1');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												昨日
											</button>
											<button id="app_search" type="button"  onclick="replaceDate('3');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去3天
											</button>
											<button id="app_search" type="button"  onclick="replaceDate('7');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去7天
											</button>
									</div>
									<!-- <div class="form-group">
							    		<label for="exampleInputName2">选择时段</label>
							    		<input type="text" id="config-demo" name="chooseTimeVO" class="form-control time" value="${pageMonitorVO.chooseTimeVO}">
									</div> -->
									<!-- <div class="form-group">
										<label for="exampleInputName2">品类名称</label>
										 <select data-placeholder="" class="chosen-select" tabindex="2"
											 name="category_id" id="category_id">
											 <#list h5PageMonitorProductList as h5PageMonitorProduct>
												<option value="${h5PageMonitorProduct.value}" <#if pageMonitorVO.category_id == h5PageMonitorProduct.value>selected</#if>>${h5PageMonitorProduct.showName}</option>
											</#list>
											<option value="">全部</option>
											<option value="1">度假酒店首页</option>
											<option value="20">机票首页</option>
											<option value="22">火车票首页</option>
										</select>
									</div> -->
									<div class="form-group">
										<label for="exampleInputName2">明细表维度</label> 
										<div class="btn-group">
											<#list signParamInfoList as state>
												<label class="btn btn-sm btn-link"><input 
													type="checkbox" name="signParam" value=${state.value} <#if state.checked ==true>checked</#if>/>${state.showName} 
												</label>
											</#list>
										</div>
									</div>
									<div class="form-group">
										<label for="exampleInputName2">URL</label>
										<input type="text" id="url" class="form-control" name="url" value="${pageMonitorVO.url}" placeholder="模糊查询url">
									</div>
									<div class="form-group">
									  	<button id="search" type="button" onclick="searchClick();" class="btn btn-pink btn-sm">
											<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
											Search
										</button>
									</div>
									<div class="form-group">
									  	<button id="export" type="button" class="btn btn-pink btn-sm">
											<span class="ace-icon fa icon-on-right bigger-110"></span>
											导出excel
										</button>
									</div>
									<div class="form-group">
									  	<button id="job" type="button" class="btn btn-pink btn-sm" <#if currentUser.loginName !="admin">style="display:none;"</#if>>
											<span class="ace-icon fa icon-on-right bigger-110"></span>
											执行JOB
										</button>
									</div>
								</form>
								<form action="${rc.contextPath}/webStatistics/export" id="exportForm" method="post" hidden="true">
									<input id="timeInterval1" name="timeInterval" type="text" hidden="true">
									<input id="category_id1" name="category_id" type="text" hidden="true">
									<input id="chooseTimeVO1" name="chooseTimeVO" type="text" hidden="true">
									<input id="url1" name="url" type="text" hidden="true">
									<input id="signParams1" name="signParams" type="text" hidden="true">
									<button type="submit" hidden="true" id="exportExcel" class="btn btn-primary" ></button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-xs-12">
					<!-- <div class="widget-box">
						<div class="widget-body" style="background-color: #EFF3F8;">
						    <div class="widget-main row"> -->
							    <div class="row">
									<div class="col-xs-6">
										<div id="main1" style="width: 100%; height: 500px; margin: 0 auto;"></div>
								    </div>
								    <div class="col-xs-6">
								    <br>
								    	<table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-bottom: 0px;border-bottom: 0px;">
										<thead>
											<tr>
												<th>序号</th>
												<!-- <th>省份</th>
												<th>城市</th>
												<th>运营商</th>
												<th>网络制式</th> -->
												<#if signParamInfoList?? && signParamInfoList?size&gt;0>
													<#list signParamInfoList as list>
														<#if list.checked ==true>
															<th>${list.showName}</th>
														</#if>
													</#list>
												</#if>
												<th>平均时间(s)</th>
												<th>访问次数</th>
												<th>占比</th>
											</tr>
										</thead>
										<tbody>
											<#if pageMonitors?? && pageMonitors?size&gt;0>
												<#list pageMonitors as pageMonitor>
													<tr class="">
														<td>${pageMonitor_index + 1}</td>
														<!-- <td>${pageMonitor.province!}</td>
														<td>${pageMonitor.city!}</td>
														<td>${pageMonitor.operators!}</td>
														<td>${pageMonitor.network_type}</td> -->
														<#if signParamInfoList?? && signParamInfoList?size&gt;0>
															<#list signParamInfoList as list>
																<#if list.checked ==true>
																	<#if list.value == "province">
																		<td>${pageMonitor.province!}</td>
																	</#if>
																	<#if list.value == "city">
																		<td>${pageMonitor.city!}</td>
																	</#if>
																	<#if list.value == "operators">
																		<td>${pageMonitor.operators!}</td>
																	</#if>
																	<#if list.value == "network_type">
																		<td>${pageMonitor.network_type}</td>
																	</#if>
																</#if>
															</#list>
														</#if>
														<td>${pageMonitor.average_time_str}</td>
														<td>${pageMonitor.visit_times!}</td>
														<td>${pageMonitor.proportion}</td>
													</tr>
												</#list>
											<#else>
												<tr>
													<td colspan="12">
														<div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div>
													</td>
												</tr>
											</#if>
										</tbody>
									</table>
									<#include "paginator.html">
								    </div>
								</div>
						    <!-- </div>
						</div>
					</div> -->
				</div>
			</div>
			</div>
		</div>

		<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
		
		<!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap.min.css"> -->
		<!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-theme.min.css"> -->
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
		<script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
	   	
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
	   	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script type="text/javascript">
			function replaceDate(obj){
	    		if(obj == '1'){
	    			startDate = new Date(new Date().getTime()-1*1000*60*60*24);
		    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
	    		}else if(obj == '3'){
	    			startDate = new Date(new Date().getTime()-3*1000*60*60*24);
		    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
	    		}else if(obj == '7'){
	    			startDate = new Date(new Date().getTime()-7*1000*60*60*24);
		    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
	    		}
			 	var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
			    $("#chooseTimeVO").val(dateStr);
			    $(".time").val(dateStr);
	    	}
		
			function dateFormat(date){
	    		var month = date.getMonth() + 1;
    		    var strDate = date.getDate();
    		    if (month >= 1 && month <= 9) {
    		        month = "0" + month;
    		    }
    		    if (strDate >= 0 && strDate <= 9) {
    		        strDate = "0" + strDate;
    		    }
    		    var currentdate = month + "/" + strDate + "/" + date.getFullYear();
    		    return currentdate;
	    	}

			function searchClick() {
				var signParamsObj = document.getElementsByName("signParam");
				var check_val = "";
				for(k in signParamsObj){
					if(signParamsObj[k].checked)
						check_val+=signParamsObj[k].value+",";
				}
				var signParam=check_val.substring(0,check_val.length-1);
				if(signParam == ""){
					showMsg("请选择明细表维度！");
					return;
				}
				var chooseTime = $("#config-demo").val();
				var category_id = $("#category_id").val();
				$("#signParams").val(signParam);
				$("#timeInterval").val("");
				$("#searchForm").submit();
			}
			
		
			jQuery(function($) {
				$('.time').daterangepicker(
						{
							startDate: new Date(new Date().getTime()-1*1000*60*60*24),
						    endDate: new Date(new Date().getTime()-1*1000*60*60*24),
							showDropdowns : true,
							showWeekNumbers : false,
							timePicker : false,
							timePicker12Hour : false,
							ranges : {
								'昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				            	'过去7天': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],  
				                '过去31天': [moment().subtract(31, 'days'), moment().subtract(1, 'days')]
							},
							opens : 'right',
							buttonClasses : [ 'btn btn-default' ],
							applyClass : 'btn-small btn-pink blue',
							cancelClass : 'btn-small',
							format : 'yyyy-MM-dd',
							separator : ' to ',
							locale : {
								applyLabel : '确定',
								cancelLabel : '取消',
								fromLabel : '起始时间',
								toLabel : '结束时间',
								customRangeLabel : '自定义',
								daysOfWeek : [ '日', '一', '二', '三', '四', '五',
										'六' ],
								monthNames : [ '一月', '二月', '三月', '四月', '五月',
										'六月', '七月', '八月', '九月', '十月', '十一月',
										'十二月' ],
								firstDay : 1
							}
						},
						function(start, end, label) {//格式化日期显示框  

							$('.time').html(
									start.format('yyyy-MM-dd') + ' - '
											+ end.format('yyyy-MM-dd'));
						});

				var chooseTimeVO = "${pageMonitorVO.chooseTimeVO}";
				if(chooseTimeVO != ""){
					$('#config-demo').val(chooseTimeVO);
				}
				
				/* 数值每3位，逗号隔开 */
				function formatNum(strNum) {
					if (strNum.length <= 3) {
						return strNum;
					}
					if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
						return strNum;
					}
					var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;
					var re = new RegExp();
					re.compile("(\\d)(\\d{3})(,|$)");
					while (re.test(b)) {
						b = b.replace(re, "$1,$2$3");
					}
					return a + "" + b + "" + c;
				}

				option1 = {
					title : {
						text : '首屏时间'
					},
					color : [ '#3398DB' ],
					tooltip : {
						trigger : 'axis',
						axisPointer : { // 坐标轴指示器，坐标轴触发有效
							type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						},
						formatter: '耗时范围: {b} <br/>耗时占比: {c}%'
					},
					grid : {
						left : '10%',
						right : '15%',
						bottom : '3%',
						containLabel : true
					},
					xAxis : [ {
						type : 'category',
						name : '耗时范围',
						data : ['0s-1s','1s-2s','2s-3s','3s-5s','5s以上'],// '1', '2', '3', '4', '5', '6', '7', '8', '9', '10' 
						axisTick : {
							alignWithLabel : true
						}
					} ],
					yAxis : [ {
						type : 'value',
						name : '耗时占比(%)'
					} ],
					series : [ {
						name : '首屏时间',
						type : 'bar',
						barWidth : '50%',
						label : {
							normal : {
								show : true,
								position : 'top'
								/* ,
								formatter : function(p) {
									return p.value+"%";
								} */
							}
						},
						data : []
					} ]
				};
				
				var proportionListData = "${proportionListData}".split(",");
				if(proportionListData!=null){
					var myChart1 = echarts.init(document.getElementById('main1'));
			  		option1.series[0].data = proportionListData;
			  		myChart1.setOption(option1);
			  		window.onresize = function(){
			  	  	  myChart1.resize();
			  	  	}
			  		myChart1.on('click', function (params) {
			  			var signParamsObj = document.getElementsByName("signParam");
						var check_val = "";
						for(k in signParamsObj){
							if(signParamsObj[k].checked)
								check_val+=signParamsObj[k].value+",";
						}
						var signParam=check_val.substring(0,check_val.length-1);
						if(signParam == ""){
							showMsg("请选择明细表维度！");
							return;
						}
						$("#signParams").val(signParam);
			  			var name = params.name;
			  		    $("#timeInterval").val(name);
			  		  	//searchClick();
			  		  	$("#searchForm").submit();
			  		});
			   }
				/* $.ajax({
		    		   url: "${rc.contextPath}/webStatistics/ajaxData",
		    		   //dataType:"json",
		    		   type : "POST",
						data : {
							chooseTimeVO : chooseTimeVO,
							category_id : category_id
						},
		    		   success: function(data){
		    			   if(data!=null){
		    					proportionListData=data.proportionListData;
		    					var myChart1 = echarts.init(document.getElementById('main1'));
						  		option1.series[0].data = proportionListData;
						  		myChart1.setOption(option1);
						  		window.onresize = function(){
						  	  	  myChart1.resize();
						  	  }
						  		myChart1.on('click', function (params) {
						  			var name = params.name;
						  		    $("#timeInterval").val(name);
						  		  	//searchClick();
						  		  	$("#searchForm").submit();
						  		});
		    			   }
		    		   }
			   		}); */
				
				
				$("#export").on("click",function(){
					var signParamsObj = document.getElementsByName("signParam");
					var check_val = "";
					for(k in signParamsObj){
						if(signParamsObj[k].checked)
							check_val+=signParamsObj[k].value+",";
					}
					var signParam=check_val.substring(0,check_val.length-1);
					if(signParam == ""){
						showMsg("请选择明细表维度！");
						return;
					}
					var timeInterval1=$("#timeInterval").val();
					var category_id1=$("#category_id").val();
					var time=$("#chooseTimeVO").val();
					var url1=$("#url").val();
					$("#signParams1").val(signParam);
					$("#timeInterval1").val(timeInterval1);
					$("#category_id1").val(category_id1);
					$("#chooseTimeVO1").val(time);
					$("#url1").val(url1);
					$("#exportExcel").click();
				});
			   		
			   	$("#job").on("click",function(){
			   		$.ajax({
		    			url: "${rc.contextPath}/webStatistics/ajaxJob",
		    		   	//dataType:"json",
		    		   	type : "POST",
							data : {
						},
						beforeSend: function(){
		    			   $("#job").attr("disabled",true);
			    		},
	    			    complete: function(){
	    			    	$("#job").attr("disabled",false);
	    			    },
		    		   	success: function(data){
		    			   if(data!=null){
		    				   var message = data.message;
		    				   showMsg(message);
		    			   }
		    		   }
			   		});
			   	});
				
			})
			
			
		</script>


		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" /> 
		<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
		
		<script>
			 $(function() {
		        $('.chosen-select').chosen();
		       	$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
		     }); 
	      	
			 function statistics(){
				$('#statistics').show();
				$('.chosen-select').chosen("destroy").chosen();
		       	$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
			 }
	    </script>
	    
	</body>
</html>